<template>  
   <svg :class="svgClass" aria-hidden="true">    
     <use :href="iconName" />  
   </svg>
</template>
<script>
export default {  
    name: 'SvgIcon', 
    props: {    
        iconClass: {      
            type: String,      
            required: true    
        },    
        className: {      
            type: String,     
            default: ''    
        }  
    },  
     computed: {
        iconName () {      
            return `#icon-${this.iconClass}`    
        },    
        svgClass () {      
            if (this.className) {       
                return 'svg-icon ' + this.className      
            } else {        
                return 'svg-icon'      
            }    
       },
  }
  }
</script> 

<style scoped>
 .svg-icon {  
    width: 20px;  
    height: 20px; 
    fill: green;  
}
.svg-external-icon {  
    mask-size: cover !important;  
    display: inline-block;
}
  </style>